import Vue from 'vue';
import { AppVisualInput } from '../app-visual-editor/app-visual-input/app-visual-input';
import { AppVisualCheckbox } from '../app-visual-editor/app-visual-checkbox/app-visual-checkbox';
import { AppVisualDatePicker } from '../app-visual-editor/app-visual-date-picker/app-visual-date-picker';
import { AppVisualSpan } from '../app-visual-editor/app-visual-span/app-visual-span';
import { AppVisualSwitch } from '../app-visual-editor/app-visual-switch/app-visual-switch';
import { AppVisualSlider } from '../app-visual-editor/app-visual-slider/app-visual-slider';
import { AppVisualRaw } from '../app-visual-editor/app-visual-raw/app-visual-raw';
import { AppVisualStepper } from '../app-visual-editor/app-visual-stepper/app-visual-stepper';
import { AppVisualDropDownList } from '../app-visual-editor/app-visual-dropdown-list/app-visual-dropdown-list';
import { AppVisualRate } from '../app-visual-editor/app-visual-rate/app-visual-rate';
import { AppVisualUpload } from '../app-visual-editor/app-visual-upload/app-visual-upload';
import { AppVisualDataPicker } from '../app-visual-editor/app-visual-data-picker/app-visual-data-picker';
import { AppVisualIPInput } from '../app-visual-editor/app-visual-ip-input/app-visual-ip-input';
import { AppVisualAutoComplete } from '../app-visual-editor/app-visual-auto-complete/app-visual-auto-complete';
import { Component, Prop } from 'vue-property-decorator';
import './app-visual-ctrl-item.less';

/**
 * @description 虚拟控件项
 * @export
 * @class AppVisualCtrlItem
 * @extends {Vue}
 */
@Component({
  components: {
    'app-visual-input': AppVisualInput,
    'app-visual-checkbox': AppVisualCheckbox,
    'app-visual-date-picker': AppVisualDatePicker,
    'app-visual-span': AppVisualSpan,
    'app-visual-switch': AppVisualSwitch,
    'app-visual-slider': AppVisualSlider,
    'app-visual-raw': AppVisualRaw,
    'app-visual-dropdown-list': AppVisualDropDownList,
    'app-visual-rate': AppVisualRate,
    'app-visual-upload': AppVisualUpload,
    'app-visual-stepper': AppVisualStepper,
    'app-visual-data-picker': AppVisualDataPicker,
    'app-visual-ip-input': AppVisualIPInput,
    'app-visual-auto-complete': AppVisualAutoComplete,
  },
})
export class AppVisualCtrlItem extends Vue {

  /**
   * @description 主键
   * @type {*}
   * @memberof AppVisualCtrlItem
   */
  @Prop() public id!: any;

  /** 
   * @description 虚拟控件类型 FORM | GRID
   * @type {string} 
   * @memberof AppVisualCtrlItem
   */
  @Prop({ default: 'FORM' }) public type!: string;

  /**
   * @description  表格行下标
   * @type {number}
   * @memberof AppVisualCtrlItem
   */
  @Prop() public rowIndex?: number;

  /**
   * @description  表格列下标
   * @type {number}
   * @memberof AppVisualCtrlItem
   */
  @Prop() public colIndex?: number;

  /**
   * @description  表格行数据
   * @type {*}
   * @memberof AppVisualCtrlItem
   */
  @Prop() public rowData: any;

  /**
   * @description 控件项实列
   * @type {*}
   * @memberof AppVisualCtrlItem
   */
  @Prop() detailInstance!: any;

  /**
   * @description 控件位置信息
   * @type {*}
   * @memberof AppVisualCtrlItem
   */
  @Prop() position!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualCtrlItem
   */
  @Prop() value!: string;

  /**
   * @description 代码表服务
   * @type {string}
   * @memberof AppVisualCtrlItem
   */
  @Prop() codeListService!: any;

  /**
   * @description 上下文
   * @type {string}
   * @memberof AppVisualCtrlItem
   */
  @Prop() context!: any;

  /**
   * @description 视图参数
   * @type {string}
   * @memberof AppVisualCtrlItem
   */
  @Prop() viewparam!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualCtrlItem
   */
  @Prop() realCompRef!: any;

  /**
   * @description 生命周期初始化
   * @memberof AppVisualCtrlItem
   */
  public created() { }

  /**
   * @description 值改变
   * @param {*} value
   * @memberof AppVisualCtrlItem
   */
  public onChange(value: any) {
    if (Object.is(this.type, 'FORM')) {
      this.$emit('change', value);
    } else {
      this.$emit('change', { rowData: this.rowData, event: value, rowIndex: this.rowIndex, colIndex: this.colIndex });
    }
  }

  /**
   * @description 绘制编辑器
   * @return {*}
   * @memberof AppVisualCtrlItem
   */
  public renderEditor() {
    const editor = this.detailInstance.getPSEditor();
    if (!editor) {
      return null;
    }
    let editorComponentName = 'app-not-supported-editor';
    switch (editor.editorType) {
      case 'TEXTBOX':
        editorComponentName = 'app-visual-input';
        break;
      case 'CHECKBOX':
        editorComponentName = 'app-visual-checkbox';
        break;
      case 'DATEPICKER':
        editorComponentName = 'app-visual-date-picker';
        break;
      case 'DATEPICKEREX_NOTIME':
        editorComponentName = 'app-visual-date-picker';
        break;
      case 'SPAN':
        editorComponentName = 'app-visual-span';
        break;
      case "DROPDOWNLIST":
        editorComponentName = 'app-visual-dropdown-list';
        break;
      case "SWITCH":
        editorComponentName = 'app-visual-switch';
        break;
      case "RATING":
        editorComponentName = 'app-visual-rate';
        break;
      case "SLIDER":
        editorComponentName = 'app-visual-slider';
        break;
      case "RAW":
        editorComponentName = 'app-visual-raw';
        break;
      case "FILEUPLOADER":
        editorComponentName = 'app-visual-upload';
        break;
      case "PICTURE":
        editorComponentName = 'app-visual-upload';
        break
      case "STEPPER":
        editorComponentName = 'app-visual-stepper';
        break;
      case "PICKER":
        editorComponentName = 'app-visual-data-picker';
        break;
      case "IPADDRESSTEXTBOX":
        editorComponentName = 'app-visual-ip-input';
        break;
      case "AC":
        editorComponentName = 'app-visual-auto-complete';
        break;
      default:
        editorComponentName = 'app-visual-input';
        break;
    }
    return this.$createElement(editorComponentName, {
      class: editor?.getPSSysCss()?.cssName,
      props: {
        editorInstance: editor,
        realCompRef: this.realCompRef,
        parentItem: this.detailInstance,
        value: this.value,
        name: editor.name,
        position: this.position,
        codeListService: this.codeListService,
        context: this.context,
        viewparam: this.viewparam,
      },
      on: {
        change: this.onChange,
      },
    });
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualCtrlItem
   */
  public render() {
    return (
      <div
        id={this.id}
        class={'app-visual-ctrl-item'}
        style={{
          zIndex: 300,
          top: `${this.position.top}px`,
          left: `${this.position.left}px`,
          width: `${this.position.width}px`,
          height: `${this.position.height}px`,
        }}
      >
        {this.renderEditor()}
      </div>
    );
  }
}
